/**
 * Copyright (c) OpenSpug Organization. https://github.com/openspug/spug
 * Copyright (c) <spug.dev@gmail.com>
 * Released under the AGPL-3.0 License.
 */
import React from 'react';
import { observer } from 'mobx-react';
import {Input, Button, Select} from 'antd';
import {SearchForm, AuthCard, CommonDiv} from 'components';
import ComTable from './Table';
import store from './store';
import {hasPermission} from "../../../libs";

export default observer(function () {
  return (
    <AuthCard auth="application.app.view">
      <SearchForm>
        <SearchForm.Item span={8} title="注册中心">
          <Select allowClear placeholder="请选择" value={store.f_register_id} onChange={v => store.f_register_id = v}>
            {store.registers.map(item => (
              <Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>
            ))}
          </Select>
        </SearchForm.Item>
        <SearchForm.Item span={6} title="APP名">
          <Input allowClear value={store.f_name} onChange={e => store.f_name = e.target.value} placeholder="请输入"/>
        </SearchForm.Item>
        <SearchForm.Item span={6}>
          <Button type="primary" icon="sync" onClick={store.fetchRecords}>刷新</Button>
        </SearchForm.Item>
      </SearchForm>
      <CommonDiv style={{marginBottom: 16}}>
        {hasPermission('application.app.add') && (
                  <Button auth="application.app.add" type="primary" icon="plus" onClick={() => store.showForm()}>新建</Button>
              )}
        {hasPermission('application.app.sync') && (
                  <Button auth="application.app.sync" style={{marginLeft: 20}} type="primary" icon="sync"
                  onClick={() => store.syncVisible = true}>同步</Button>
              )}
      </CommonDiv>
      <ComTable/>
    </AuthCard>
  )
})
